<template>
  <div class="wrapper" ref="sss">
    <ul>
      <button @click="btnClick">按钮</button>
      <li>demo列表1</li>
      <li>demo列表2</li>
      <li>demo列表3</li>
      <li>demo列表4</li>
      <li>demo列表5</li>
      <li>demo列表6</li>
      <li>demo列表7</li>
      <li>demo列表8</li>
      <li>demo列表9</li>
      <li>demo列表10</li>
      <li>demo列表11</li>
      <li>demo列表12</li>
      <li>demo列表13</li>
      <li>demo列表14</li>
      <li>demo列表15</li>
      <li>demo列表16</li>
      <li>demo列表17</li>
      <li>demo列表18</li>
      <li>demo列表19</li>
      <li>demo列表20</li>
      <li>demo列表21</li>
      <li>demo列表22</li>
      <li>demo列表23</li>
      <li>demo列表24</li>
      <li>demo列表25</li>
      <li>demo列表26</li>
      <li>demo列表27</li>
      <li>demo列表28</li>
      <li>demo列表29</li>
      <li>demo列表30</li>
      <li>demo列表31</li>
      <li>demo列表32</li>
      <li>demo列表33</li>
      <li>demo列表34</li>
      <li>demo列表35</li>
      <li>demo列表36</li>
      <li>demo列表37</li>
      <li>demo列表38</li>
      <li>demo列表39</li>
      <li>demo列表40</li>
      <li>demo列表41</li>
      <li>demo列表42</li>
      <li>demo列表43</li>
      <li>demo列表44</li>
      <li>demo列表45</li>
      <li>demo列表46</li>
      <li>demo列表47</li>
      <li>demo列表48</li>
      <li>demo列表49</li>
      <li>demo列表50</li>
      <li>demo列表51</li>
      <li>demo列表52</li>
      <li>demo列表53</li>
      <li>demo列表54</li>
      <li>demo列表55</li>
      <li>demo列表56</li>
      <li>demo列表57</li>
      <li>demo列表58</li>
      <li>demo列表59</li>
      <li>demo列表60</li>
      <li>demo列表61</li>
      <li>demo列表62</li>
      <li>demo列表63</li>
      <li>demo列表64</li>
      <li>demo列表65</li>
      <li>demo列表66</li>
      <li>demo列表67</li>
      <li>demo列表68</li>
      <li>demo列表69</li>
      <li>demo列表70</li>
      <li>demo列表71</li>
      <li>demo列表72</li>
      <li>demo列表73</li>
      <li>demo列表74</li>
      <li>demo列表75</li>
      <li>demo列表76</li>
      <li>demo列表77</li>
      <li>demo列表78</li>
      <li>demo列表79</li>
      <li>demo列表80</li>
      <li>demo列表81</li>
      <li>demo列表82</li>
      <li>demo列表83</li>
      <li>demo列表84</li>
      <li>demo列表85</li>
      <li>demo列表86</li>
      <li>demo列表87</li>
      <li>demo列表88</li>
      <li>demo列表89</li>
      <li>demo列表90</li>
      <li>demo列表91</li>
      <li>demo列表92</li>
      <li>demo列表93</li>
      <li>demo列表94</li>
      <li>demo列表95</li>
      <li>demo列表96</li>
      <li>demo列表97</li>
      <li>demo列表98</li>
      <li>demo列表99</li>
      <li>demo列表100</li>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: "Category",
  data() {
    return {
      bs: null
    }
  },
  mounted() {
    this.bs = new BScroll(this.$refs.sss, {
      probeType: 2,
      pullUpLoad: true,
      click: true
    })

    this.bs.on('scroll', (position) => {
      // console.log(position)
    })
    this.bs.on('pullingUp', () => {
      console.log('上拉加载更多，启动')
      // this.bs.finishPullUp()
    })
  },
  methods: {
    btnClick() {
      console.log('btnClick')
    }

  }
}
</script>

<style scoped>
.wrapper {
  height: 300px;
  background-color: lightblue;
  overflow: hidden;

}
</style>
